<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>Whirlpool</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">

		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<!--[if lt IE 7]>
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, #nav li a, .button span, .button a');</script>
<![endif]-->
		<script type="text/javascript" language="javascript"
			src="js/jquery-1.3.2.js"></script>
		<script type="text/javascript"> 
$(document).ready(function(){
$("#home").click(function(){
    $("#panel1").slideToggle("slow");
  });
$("#articles").click(function(){
    $("#panel2").slideToggle("slow");
  });
$("#contact").click(function(){
    $("#panel3").slideToggle("slow");
  });
$("#site").click(function(){
    $("#panel4").slideToggle("slow");
  });
});
</script>

		<style type="text/css"> 
#nav div
{
height:120px;
display:none;
}
</style>
	</head>

	<body id="page1">
		<div class="tail-right"></div>
		<div class="tail-right-top"></div>
		<div class="tail-top">
			<div class="tail-bottom">
				<div class="tail-bg">
					<div class="top-bg">
						<div class="tail-right-bot"></div>
						<div class="bot-bg">
							<div id="main">
								<!-- header -->
								<div id="header">
									<h1>
										<a href="#">whirlpool</a><span>Free 1024 x 768
											Optimized Website Template from 88web.org</span>
									</h1>
									<ul class="top-links">
										<li>
											<a href="#"><img alt="" src="images/icon-home.gif" /> </a>
										</li>
										<li>
											<a href="#"><img alt="" src="images/icon-mail.gif" /> </a>
										</li>
										<li>
											<a href="#"><img alt="" src="images/icon-map.gif" /> </a>
										</li>
									</ul>
								</div>
								<div class="extra-img">
									<img alt="" src="images/extra-img.png" class="png" />
								</div>
								<div class="wrapper">
									<!-- nav -->
									<div id="nav">
										<ul>
											<li id="home">
												<a href="#">Home</a>
											</li>
											<div id="panel1">
												<ul>
													<li>
														<a href="pages/common/home.html" target="mainFrame">列表1</a>
													</li>
													<li>
														<a href="pages/common/home.html" target="mainFrame">列表2</a>
													</li>
													<li>
														<a href="pages/common/home.html" target="mainFrame">列表3</a>
													</li>
												</ul>
											</div>
											<li id="articles">
												<a href="#">Articles</a>
											</li>
											<div id="panel2">
												<ul>
													<li>
														<a href="pages/common/articles.html" target="mainFrame">列表1</a>
													</li>
													<li>
														<a href="pages/common/articles.html" target="mainFrame">列表2</a>
													</li>
													<li>
														<a href="pages/common/articles.html" target="mainFrame">列表3</a>
													</li>
												</ul>
											</div>
											<li id="contact">
												<a href="#">Contact Us</a>
											</li>
											<div id="panel3">
												<ul>
													<li>
														<a href="pages/common/contact.html" target="mainFrame">列表1</a>
													</li>
													<li>
														<a href="pages/common/contact.html" target="mainFrame">列表2</a>
													</li>
													<li>
														<a href="pages/common/contact.html" target="mainFrame">列表3</a>
													</li>
												</ul>
											</div>
											<li id="site">
												<a href="#">Site Map</a>
											</li>
											<div id="panel4">
												<ul>
													<li>
														<a href="pages/common/sitemap.html" target="mainFrame">列表1</a>
													</li>
													<li>
														<a href="pages/common/sitemap.html" target="mainFrame">列表2</a>
													</li>
													<li>
														<a href="pages/common/sitemap.html" target="mainFrame">列表3</a>
													</li>
												</ul>
											</div>
											<li id="about">
												<a href="pages/common/about.html" target="mainFrame">About Us</a>
											</li>
										</ul>
									</div>
									<!-- content -->
									<div
										style="float:left;width:661px;min-height:680px;!important;height:680px;padding:40px 0">
										<iframe id="mainFrame" name="mainFrame"
											style="height: 100%; visibility: inherit;
                    width: 100%; z-index: 1"
											scrolling="auto" frameborder="0" src="pages/common/home.jsp">
										</iframe>
									</div>
								</div>
							</div>
							<!-- footer -->
							<div id="footer">
								<div class="indent">
									<div class="fleft">
										Copyrights - Type in Your Name Here
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
